<template>
  <div class="bigvideo">
    <div
      class="background"
      :style="`background-image:url(${$route.query.background})`"
      v-if="background"
    ></div>
      <video :src="$route.query.url" ref="video" controls > </video>

    <div class="pl" @click="play"><div class="playicon" @click="play" v-show="background"></div></div>

    <div class="movie-info">
      <div class="title">{{ $route.query.count }}</div>
      <div class="info">
        <img :src="$route.query.img" alt="" />
        <span>{{ $route.query.nickName }}</span>
        <i></i>
      </div>
    </div>

    <div class="geiw" v-if="background"></div>
    <div class="geiq" v-show="!background"></div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      playing: true,
      background: true,
    };
  },
  methods: {
    play: function () {
      if (!this.$refs.video.paused) {
        this.$refs.video.pause();
      } else {
        this.$refs.video.play();
      }
      this.playing = this.$refs.video.paused;
      this.background = false;
      console.log(this.background, this.playing);
    },
  },
  created: function () {
    // this.getPlayListDetail(this.$route.query.url);
    console.log(this.$route.query.url);
    console.log(this.$route.query.img);
    console.log(this.$route.query.count);
    console.log(this.$route.query.nickName);
    console.log(this.$route.query.background);
  },
};
</script>

<style lang="less" scoped>
.bigvideo {
  position: relative;

    video {
      width: 375.2px;
      height: 211px;
    }
  .pl {
      width: 100%;
      height: 160px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 11;

      .playicon {
        width: 42px;
        height: 42px;
        background: url(http://p1.meituan.net/moviemachine/0bde92ac8061da52eee903fdafc483da6378.png)
          no-repeat;
        background-size: contain;
        position: absolute;
        top: 60%;
        left: 45%;
      }
    }

  .background {
    width: 100%;
    height: 211px;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .movie-info {
    background: #fefefe;
    padding: 14px 15px 15px;

    .title {
      font-size: 15px;
      color: #333333;
      line-height: 22px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .info {
      display: flex;
      align-items: center;
      margin-top: 8px;
      img {
        width: 25px;
        height: 25px;
        border-radius: 50%;
      }
      span {
        margin: 0 4px 0 8px;
        font-size: 13px;
        color: #333333;
      }
      i {
        width: 12px;
        height: 12px;
        display: inline-block;
        background: url(//p0.meituan.net/moviemachine/5aaa710d72c78d6553be83f43bc9e4f3946.png);
        background-size: contain;
      }
    }
  }

  .geiw {
    background: #f4f4f4;
    width: 100%;
    height: 348px;
  }
  .geiq {
    background: #f4f4f4;
    width: 100%;
    height: 368px;
  }
}
</style>